<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>客户端等级符号专题图</title>
    <!--导入外部样式表-->
    <link rel="stylesheet" href="./static/demo/openlayers/example/style.css" />
        <!--必要的脚本引用-->
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>    
    <script src="./static/libs/include-openlayers-local.js"></script>
    <style>
        /* body {
            height: 700px;
        } */

        .ol-popup {
            position: absolute;
            background-color: white;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #cccccc;
            bottom: 12px;
            left: -50px;
            min-width: 150px;
        }

        .ol-popup:after,
        .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

        .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }

        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }
    </style>
    <script type="text/javascript">
        //使用严格模式
        "use strict";
        //定义地图文档图层和地图、专题图图层
        var mapDocLayer, map, themeSource, themeLayer;
        var {
            protocol,
            ip,
            port
        } = window.webclient; 
        var ip = `${ip}`;
        var port = `${port}`;
        var docName = 'Hubei4326';
        var content = null;
        var overlay = null;

        /** 初始化地图显示*/
        function init() {
            var center = [(108.34341 + 116.150939561213) / 2, (29.0125822276524 + 33.2932017737021) / 2];
            var extent = [-180, -90, 180, 90];
            //投影坐标系
            var projection = new ol.proj.Projection({
                units: 'degrees',
                extent: extent
            });

            var container = document.getElementById('popup');
            content = document.getElementById('popup-content');
            overlay = new ol.Overlay(({
                element: container,
                autoPan: true,
                autoPanAnimation: {
                    duration: 250
                }
            }));
            
            map = new ol.Map({
                target: 'ol_map',
                //要添加地图容器的DIV的ID
                //layers: [mapDocLayer],
                //地图容器中要加载的图层列表
                view: new ol.View({
                    center: center,
                    projection: projection,
                    zoom: 7
                }),
                overlays: [overlay]
            });
            //地图的显示名称
            var name = "MapGIS IGS MapDocLayer";
            mapDocLayer = new Zondy.Map.MapDocTileLayer(name, docName, {
                //IP地址
                ip: ip,
                //端口号
                port: port
            });
            map.addLayer(mapDocLayer);
        }

        /** 添加专题图*/
        function createThemeBtn() {
            //startPressBar();
            addThemeFeatures(gradeQuerySuccess);
        }

        /** 添加专题图要素*/
        function addThemeFeatures(onsuccess) {
            var queryStruct = new Zondy.Service.QueryFeatureStruct();
            //是否包含几何图形信息
            queryStruct.IncludeGeometry = true;
            //是否包含属性信息
            queryStruct.IncludeAttribute = true;
            //是否包含图形显示参数
            queryStruct.IncludeWebGraphic = false;
            //实例化查询参数对象
            var queryParam = new Zondy.Service.QueryParameter({
                resultFormat: "json",
                struct: queryStruct,
                where: '1>0'
            });
            //设置查询分页号
            queryParam.pageIndex = 0;
            //设置查询要素数目
            queryParam.recordNumber = 10000;
            //实例化地图文档查询服务对象
            var queryService = new Zondy.Service.QueryDocFeature(queryParam, docName, 1, {
                ip: ip,
                port: port,
                requestType: 'POST'
            });

            //执行查询操作，querySuccess为查询回调函数
            queryService.query(onsuccess, null);
        }

        /** 生成专题图*/
        function gradeQuerySuccess(data) {
            if (data != null) {
                var options = {
                    isHoverAble: true,
                    //fitZoom: 8,
                    calGravity: true
                };
                options.map = map;
                options.themeField = "GDP2016";
                // 配置图表参数
                options.symbolSetting = {
                    //允许图形展示的值域范围，此范围外的数据将不制作图图形,必设参数
                    codomain: [0, 1400],
                    //圆最大半径 默认100
                    maxR: 25,
                    //圆最小半径 默认0
                    minR: 5,
                    // 圆形样式
                    circleStyle: {
                        fillOpacity: 0.8
                    },
                    // 符号专题图填充颜色
                    fillColor: "#00FF7F",
                    // 专题图hover 样式
                    circleHoverStyle: {
                        fillOpacity: 1,
                        stroke: true,
                        strokeWidth: 4,
                        strokeColor: 'blue'
                    }
                };
                themeSource = new Zondy.Source.RankSymbolThemeSource("ThemeLayer", "Circle", options);
                themeSource.addFeatures(data);
                //专题图层 mousemove 事件
                themeSource.on('mousemove', showInfoWin);
                var pointerInteraction = new ol.interaction.Pointer({
                    handleMoveEvent: function (event) {
                        themeSource.fire('mousemove', event);
                    }
                });
                map.addInteraction(pointerInteraction);
                themeLayer = new ol.layer.Image({
                    source: themeSource
                });
                themeLayer.setOpacity(0.8);
                map.addLayer(themeLayer);
            }
            //stopPressBar();
        }

        /** 删除专题图*/
        function deleteTheme() {
            if (map != null && themeLayer != null) {
                map.removeLayer(themeLayer);
                themeLayer = null
            }
        }

        /** 设置弹框*/
        function showInfoWin(e) {
            // e.target 是图形对象，即数据的可视化对象，柱状图中是柱条;
            // 图形对象的 refDataID 属性是数据（feature）的 id 属性，它指明图形对象是由那个数据制作而来;
            // 图形对象的 dataInfo 属性是图形对象表示的具体数据，他有两个属性，field 和 value;
            if (e.target && e.target.refDataID && e.target.dataInfo) {
                closeInfoWin();
                // 获取图形对应的数据 (feature)
                var fea = themeLayer.getSource().getFeatureById(e.target.refDataID);

                var info = e.target.dataInfo;
                // 弹窗内容
                var contentHTML = "<div style='color: #000; background-color: #fff'>";
                contentHTML += "行政区：" + "<br><strong>" + fea.attributes['NAME'] + "</strong>";

                contentHTML += "<hr style='margin: 3px'>";
                contentHTML += "GDP2016： <br/><strong>" + info.value + "</strong>(亿元)";
                contentHTML += "</div>";

                content.innerHTML = contentHTML;
                overlay.setPosition(map.getCoordinateFromPixel([e.event.x, e.event.y]));
                return;
            }
            closeInfoWin();
        }

        /** 移除地图弹窗*/
        function closeInfoWin() {
            if (overlay) {
                overlay.setPosition(undefined);
            }
        }

        // /** 开始进度条动画*/
        // function startPressBar() {
        //     document.getElementById('preview').style.display = "";
        // }

        // /** 停止进度条动画*/
        // function stopPressBar() {
        //     document.getElementById('preview').style.display = "none";
        // }
    </script>
</head>

<body onload="init();">
    <div id="mapCon" style="position: absolute;width: 100%; height:95%;">
    </div>
    <div id="menuContain" class='menuContain'>
        <div id="tool-container">
            <div id='dataSourceMenuID' class="optmain" status="unactive" onclick="switchMenuStatus(this,'menu1')">
                <span></span><i class="menuGroup">专题图</i><em></em>
            </div>
        </div>
    </div>
    <div id="menu1" class="menuStrip" style='display:none; z-index:999'>
        <ul class="menuItems">
            <li onclick="createThemeBtn()"><span class="item1"></span><i>创建</i>
            </li>
            <li class="divider"></li>
            <li onclick="deleteTheme()"><span class="item3"></span><i>删除</i>
            </li>
        </ul>
    </div>
    <div id="ol_map" style="width:100%;height:100%;position:absolute;top:0px;">

    </div>
    <div id="popup" class="ol-popup">
        <div id="popup-content"></div>
    </div>
    <script>
        function switchMenuStatus(div, menuitemFrameID) {
            var temDivs = document.getElementsByClassName('optmain');
            if (temDivs.length > 0) {
                for (var i = 0; i < temDivs.length; i++) {
                    if (temDivs[i] === div) {
                        var status = div.getAttribute("status");
                        if (status == "unactive") {
                            div.setAttribute("status", "active");
                            var tem_spans = div.getElementsByTagName("span");
                            var tem_ems = div.getElementsByTagName("em");
                            tem_spans[0].className = "active";
                            tem_ems[0].className = "active";

                            //显示菜单项
                            DisplayMenuItem(true, menuitemFrameID);

                        } else {
                            div.setAttribute("status", "unactive");
                            var tem_spans = div.getElementsByTagName("span");
                            var tem_ems = div.getElementsByTagName("em");
                            tem_spans[0].className = "";
                            tem_ems[0].className = "";

                            //隐藏菜单项
                            DisplayMenuItem(false, menuitemFrameID);
                        }
                    } else {
                        var status = temDivs[i].getAttribute("status");
                        if (status == "active") {
                            temDivs[i].setAttribute("status", "unactive");
                            var tem_spans = temDivs[i].getElementsByTagName("span");
                            var tem_ems = temDivs[i].getElementsByTagName("em");
                            tem_spans[0].className = "";
                            tem_ems[0].className = "";
                        }
                    }
                }
            }
        }

        function DisplayMenuItem(isDisplay, iframeID) {
            var menuItemFrame = document.getElementById(iframeID);
            if (menuItemFrame != null) {
                if (isDisplay) {
                    var temDivs = document.getElementsByClassName('menuStrip');
                    if (temDivs.length > 0) {
                        for (var i = 0; i < temDivs.length; i++) {
                            if (temDivs[i] != menuItemFrame) {
                                temDivs[i].style.display = "none";
                            }
                        }
                    }
                    menuItemFrame.style.display = "";
                } else {
                    menuItemFrame.style.display = "none";
                }
            }
        };
    </script>
</body>

</html>